<!DOCTYPE html>
<html>
      <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width,initial-scale=1">
            <title>输入框组</title>
            <link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
            <script src="https://cdn.staticfile.net/jquery/3.2.1/jquery.min.js"></script>
            <script src="https://cdn.staticfile.net/popper.js/1.15.0/umd/popper.min.js"></script>
            <script src="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
      </head>
      <body>
            <div class="container">
                  <!-- 输入框使用前标和后标 -->
                  <form>
                        <div class="input-group mb-3">
                              <div class="input-group-prepend">
                                    <span class="input-group-text">@</span>
                              </div>
                              <input type="text" class="form-control" placeholder="请输入用户名">
                        </div>
                        <div class="input-group mb-3">
                              <input type="text" class="form-control" placeholder="请输入邮箱">
                              <div class="input-group-append">
                                    <span class="input-group-text">@runoob.com</span>
                              </div>
                        </div>
                  </form>

                  <!-- 不同规格的输入框组 -->
                  <form>
                        <div class="input-group mb-3 input-group-sm">
                              <div class="input-group-prepend">
                                    <span class="input-group-text">小</span>
                              </div>
                              <input type="text" class="form-control">
                        </div>
                        <div class="input-group mb-3">
                              <div class="input-group-prepend">
                                    <span class="input-group-text">默认</span>
                              </div>
                              <input type="text" class="form-control">
                        </div>
                        <div class="input-group mb-3 input-group-lg">
                              <div class="input-group-prepend">
                                    <span class="input-group-text">大</span>
                              </div>
                              <input type="text" class="form-control">
                        </div>
                  </form>

                  <!-- 多个前标，多个输入框 -->
                  <form>
                        <div class="input-group mb-3">
                              <div class="input-group-prepend">
                                    <span class="input-group-text">姓名</span>
                                    <span class="input-group-text">姓</span>
                                    <span class="input-group-text">名</span>
                              </div>
                              <input type="text" class="form-control" placeholder="请输入姓">
                              <input type="text" class="form-control" placeholder="请输入名">
                        </div>
                  </form>

                  <!-- 单选框和多选框 -->
                  <form>
                        <div class="input-group mb-3">
                              <div class="input-group-prepend">
                                    <div class="input-group-text">
                                          <input type="radio">
                                    </div>
                                    <div class="input-group-text">
                                          <input type="checkbox">
                                    </div>
                              </div>
                              <input type="text" class="form-control" placeholder="RUNOOB">
                              <input type="text" class="form-control" placeholder="GOOGLE">
                              <input type="text" class="form-control" placeholder="BAIDU">
                        </div>
                        <div class="input-group mb-3">
                              <div class="input-group-prepend">
                                    <div class="input-group-text">
                                          <input type="radio">
                                    </div>
                              </div>
                              <input type="text" class="form-control" placeholder="BAIDU">
                        </div>
                        <div class="input-group mb-3">
                              <div class="input-group-prepend">
                                    <div class="input-group-text">
                                          <input type="checkbox">
                                    </div>
                              </div>
                              <input type="text" class="form-control" placeholder="GOOGLE">
                        </div>
                  </form>

                  <!-- 下拉菜单 -->
                  <form>
                        <div class="input-group mt-3 mb-3">
                              <div class="input-group-prepend">
                                    <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">选择网站</button>
                                    <div class="dropdown-menu">
                                          <a class="dropdown-item" href="#">GOGLE</a>
                                          <a class="dropdown-item" href="#">RUNOOB</a>
                                          <a class="dropdown-item" href="#">TAOBAO</a>
                                    </div>
                              </div>
                              <input type="text" class="form-control" placeholder="网站地址">
                        </div>
                  </form>
            </div>
      </body>
</html>